{extend name='admin@main'}
{block name="content"}
<style>
    .store-total-container {
        font-size: 14px;
        margin-bottom: 20px;
        letter-spacing: 1px;
    }
    .store-total-container .store-total-item > div:nth-child(2) {
        font-size: 46px;
        line-height: 46px;
    }
    @media screen and (min-device-width: 992px) {
        .game_distribution {
            width: 50%;
        }
    }
    ::-webkit-scrollbar {width: 10px;height: 10px;background-color: rgba(240, 240, 240, 1);}
</style>
<div class="think-box-shadow">
    {include file='trade/habit_search'}
    {notempty name='list'}
    <div class="layui_table_width_scroll_36" >
        <table class="layui-table margin-top-10" lay-skin="line" >
        <thead>
        <tr>
            <th class="text-left nowrap">日期</th>
            <th class='text-left'>计费点</th>
            <th class='text-left'>付费人数</th>
            <th class='text-left'>付费次数</th>
            <th class='text-left'>新用户付费次数</th>
            <th class='text-left'>付费金额</th>
            <th class='text-left'>金额占比</th>
        </tr>
        </thead>
        <tbody>
        {foreach $list as $key=>$vo}
            <tr>
                <td class='text-left nowrap'>{$vo.time}</td>
                <td class='text-left nowrap'>{$vo.billing_name}</td>
                <td class='text-left nowrap'>{$vo.recharge_num}</td>
                <td class='text-left nowrap'>{$vo.count}</td>
                <td class='text-left nowrap'>{$vo.new_user_recharge_count}</td>
                <td class='text-left nowrap'>{$vo.recharge}</td>
                <td class='text-left nowrap'>{$vo.rate}</td>
            </tr>
        {/foreach}
        </tbody>
    </table>
    </div>
    <table class="layui-table margin-top-10" lay-skin="line" >
        <thead>
        <tr>
            <th class="text-left nowrap" style="padding-left: 3em;" >合计</th>
            <th class='text-left nowrap'>付费人数:<?php echo array_sum(array_column($list,'recharge_num')); ?></th>
            <th class='text-left nowrap'>付费次数:<?php echo array_sum(array_column($list,'count')); ?></th>
            <th class='text-left nowrap'>新用户付费次数:<?php echo array_sum(array_column($list,'new_user_recharge_count')); ?></th>
            <th class='text-left nowrap'>付费金额:<?php echo array_sum(array_column($list,'recharge')); ?></th>
        </tr>
        </thead>
    </table>
    <div class="think-box-shadow store-total-container notselect">
        <div class="layui-row layui-col-space15">
            <div class="margin-bottom-15">计费点充值分布 <b style="font-size: 12px;color: #ccc;"></b></div>
            <div id="billing_user_recharge" style="height:850px;">
            </div>
        </div>
    </div>
    <div class="think-box-shadow store-total-container notselect">
        <div class="layui-row layui-col-space15">
            <div class="margin-bottom-15">计费点付费次数分布 <b style="font-size: 12px;color: #ccc;"></b></div>
            <div id="billing_user_recharge_num" style="height:850px;">
            </div>
        </div>
    </div>
    <script>
        require(['echarts'], function (echarts, chart) {
            chart = echarts.init(document.getElementById('billing_user_recharge'));
            window.onresize = chart.resize;
            var seriesLabel = {
                normal: {
                    show: true,
                    textBorderWidth: 1
                }
            }
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data:['计费点充值分布']
                },
                grid: {
                    left: 180
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    inverse: true,
                    data: eval('{:json_encode($user_billing_count.billing)}'),
                    axisLabel: {
                        margin: 20,
                        rich: {
                            value: {
                                lineHeight: 50,
                                align: 'left'
                            },
                        }
                    }
                },
                series: [
                    {
                        name:'计费点充值分布',
                        type: 'bar',
                        label: seriesLabel,
                        data: eval('{:json_encode($user_billing_count.recharge)}'),
                        itemStyle: {
                            normal: {
                                borderWidth: 10,
                                color: '#dd9c4b'
                            }
                        }
                    }
                ]
            };
            chart.setOption(option);
        });
    </script>
    <script>
        require(['echarts'], function (echarts, chart) {
            chart = echarts.init(document.getElementById('billing_user_recharge_num'));
            window.onresize = chart.resize;
            var seriesLabel = {
                normal: {
                    show: true,
                    textBorderWidth: 1
                }
            }
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data:['计费点付费次数分布']
                },
                grid: {
                    left: 180
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    inverse: true,
                    data: eval('{:json_encode($user_billing_num.billing)}'),
                    axisLabel: {
                        margin: 20,
                        rich: {
                            value: {
                                lineHeight: 50,
                                align: 'left'
                            },
                        }
                    }
                },
                series: [
                    {
                        name:'计费点付费次数分布',
                        type: 'bar',
                        label: seriesLabel,
                        data: eval('{:json_encode($user_billing_num.count)}'),
                        itemStyle: {
                            normal: {
                                borderWidth: 10,
                                color: '#dd6823'
                            }
                        }
                    }
                ]
            };
            chart.setOption(option);
        });
    </script>
    {else/}
    <span class="notdata">没有记录哦</span>
    {/notempty}
    {/block}
</div>
